"use client"

import { useState } from "react"
import { Button } from "@/components/ui/button"
import { Badge } from "@/components/ui/badge"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs"
import {
  ArrowLeft,
  Edit,
  Settings,
  Zap,
  Thermometer,
  Shield,
  Power,
  User,
  Calendar,
  Activity,
  CheckCircle,
  Clock,
  AlertTriangle
} from "lucide-react"

interface MotorProject {
  id: string
  name: string
  customer: string
  salesperson: string
  requirements: string
  description: string
  status: string
  
  // 电机基础参数
  motorType: string
  motorPower: string
  motorVoltage: string
  motorCurrent: string
  ratedSpeed: string
  ratedTorque: string
  
  // 工作环境
  workingTempMin: string
  workingTempMax: string
  maxPower: string
  ratedVoltage: string
  
  // 控制描述
  controlMode: string
  driveType: string
  communication: string
  
  // 项目信息
  createTime: string
  updateTime: string
  progress: number
}

interface MotorProjectDetailProps {
  projectId: string
  onBack?: () => void
}

export function MotorProjectDetail({ projectId, onBack }: MotorProjectDetailProps) {
  const [project, setProject] = useState<MotorProject | null>(null)
  const [loading, setLoading] = useState(true)

  // 模拟项目数据
  const mockProject: MotorProject = {
    id: "1",
    name: "SZCG - 18",
    customer: "苏州成就智能科技有限公司",
    salesperson: "陈涛",
    requirements: "45电机55风道22.2V250W PWM驱动",
    description: "这是一个针对特定应用场景的电机控制项目，需要精确的PWM驱动控制。",
    status: "active",
    motorType: "无刷电机",
    motorPower: "250W",
    motorVoltage: "22.2V",
    motorCurrent: "10A",
    ratedSpeed: "3000rpm",
    ratedTorque: "5.0Nm",
    workingTempMin: "-5",
    workingTempMax: "+50",
    maxPower: "250W",
    ratedVoltage: "22.2V",
    controlMode: "PWM驱动",
    driveType: "三相驱动",
    communication: "UART",
    createTime: "2024-01-10",
    updateTime: "2024-01-15",
    progress: 75
  }

  useState(() => {
    const fetchProject = async () => {
      try {
        setLoading(true)
        const response = await fetch(`/api/motor-projects/${projectId}`)
        if (response.ok) {
          const data = await response.json()
          setProject(data)
        } else {
          // 如果API失败，使用模拟数据
          setProject(mockProject)
        }
      } catch (error) {
        console.error('Error fetching project:', error)
        // 如果API失败，使用模拟数据
        setProject(mockProject)
      } finally {
        setLoading(false)
      }
    }
    
    fetchProject()
  })

  const getStatusColor = (status: string) => {
    switch (status) {
      case "active": return "bg-green-100 text-green-800"
      case "testing": return "bg-yellow-100 text-yellow-800"
      case "completed": return "bg-blue-100 text-blue-800"
      case "pending": return "bg-gray-100 text-gray-800"
      default: return "bg-gray-100 text-gray-800"
    }
  }

  const getStatusIcon = (status: string) => {
    switch (status) {
      case "active": return <Activity className="h-4 w-4" />
      case "testing": return <Clock className="h-4 w-4" />
      case "completed": return <CheckCircle className="h-4 w-4" />
      case "pending": return <AlertTriangle className="h-4 w-4" />
      default: return <AlertTriangle className="h-4 w-4" />
    }
  }

  const getStatusText = (status: string) => {
    switch (status) {
      case "active": return "进行中"
      case "testing": return "测试中"
      case "completed": return "已完成"
      case "pending": return "待开始"
      default: return "未知"
    }
  }

  if (loading) {
    return (
      <div className="flex items-center justify-center h-64">
        <div className="text-center">
          <div className="animate-spin rounded-full h-8 w-8 border-b-2 border-blue-600 mx-auto"></div>
          <p className="mt-2 text-sm text-gray-500">加载中...</p>
        </div>
      </div>
    )
  }

  if (!project) {
    return (
      <div className="text-center py-12">
        <AlertTriangle className="h-12 w-12 text-gray-400 mx-auto mb-4" />
        <h3 className="text-lg font-medium text-gray-900 mb-2">项目未找到</h3>
        <p className="text-gray-500">请检查项目ID是否正确</p>
      </div>
    )
  }

  return (
    <div className="space-y-6">
      {/* 顶部工具栏 */}
      <div className="flex items-center justify-between">
        <div className="flex items-center gap-4">
          <Button variant="outline" onClick={onBack}>
            <ArrowLeft className="mr-2 h-4 w-4" />
            返回
          </Button>
          <div>
            <h1 className="text-2xl font-bold">{project.name}</h1>
            <p className="text-gray-500">{project.customer}</p>
          </div>
        </div>
        <div className="flex items-center gap-4">
          <Badge className={getStatusColor(project.status)}>
            {getStatusIcon(project.status)}
            <span className="ml-1">{getStatusText(project.status)}</span>
          </Badge>
          <Button variant="outline">
            <Edit className="mr-2 h-4 w-4" />
            编辑项目
          </Button>
        </div>
      </div>

      {/* 项目基本信息卡片 */}
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Settings className="h-5 w-5" />
            项目基本信息
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
            <div>
              <label className="text-sm font-medium text-gray-500">项目名称</label>
              <p className="text-lg font-semibold">{project.name}</p>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-500">客户</label>
              <p className="text-lg">{project.customer}</p>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-500">业务员</label>
              <div className="flex items-center gap-2">
                <User className="h-4 w-4 text-gray-400" />
                <span>{project.salesperson}</span>
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-500">创建时间</label>
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4 text-gray-400" />
                <span>{new Date(project.createTime).toLocaleDateString()}</span>
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-500">更新时间</label>
              <div className="flex items-center gap-2">
                <Calendar className="h-4 w-4 text-gray-400" />
                <span>{new Date(project.updateTime).toLocaleDateString()}</span>
              </div>
            </div>
            <div>
              <label className="text-sm font-medium text-gray-500">项目进度</label>
              <div className="flex items-center gap-2">
                <div className="w-20 h-2 bg-gray-200 rounded-full overflow-hidden">
                  <div 
                    className={`h-full rounded-full ${
                      project.progress === 100 ? 'bg-green-500' : 
                      project.progress > 50 ? 'bg-blue-500' : 'bg-yellow-500'
                    }`}
                    style={{ width: `${project.progress}%` }}
                  />
                </div>
                <span className="text-sm font-medium">{project.progress}%</span>
              </div>
            </div>
          </div>
          
          <div className="mt-6 space-y-4">
            <div>
              <label className="text-sm font-medium text-gray-500">需求描述</label>
              <p className="mt-1 text-gray-700 bg-gray-50 p-3 rounded-md">{project.requirements}</p>
            </div>
            
            {project.description && (
              <div>
                <label className="text-sm font-medium text-gray-500">项目描述</label>
                <p className="mt-1 text-gray-700">{project.description}</p>
              </div>
            )}
          </div>
        </CardContent>
      </Card>

      {/* 详细信息标签页 */}
      <Tabs defaultValue="motor" className="space-y-4">
        <TabsList className="grid w-full grid-cols-4">
          <TabsTrigger value="motor">电机参数</TabsTrigger>
          <TabsTrigger value="environment">工作环境</TabsTrigger>
          <TabsTrigger value="control">控制描述</TabsTrigger>
          <TabsTrigger value="image">项目图片</TabsTrigger>
        </TabsList>

        <TabsContent value="motor" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Zap className="h-5 w-5" />
                电机基础参数
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">电机类型</label>
                  <div className="p-3 bg-blue-50 rounded-md">
                    <p className="font-semibold text-blue-900">{project.motorType}</p>
                  </div>
                </div>
                
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">电机功率</label>
                  <div className="p-3 bg-green-50 rounded-md">
                    <p className="font-semibold text-green-900">{project.motorPower}</p>
                  </div>
                </div>
                
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">电机电压</label>
                  <div className="p-3 bg-yellow-50 rounded-md">
                    <p className="font-semibold text-yellow-900">{project.motorVoltage}</p>
                  </div>
                </div>
                
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">电机电流</label>
                  <div className="p-3 bg-red-50 rounded-md">
                    <p className="font-semibold text-red-900">{project.motorCurrent}</p>
                  </div>
                </div>
                
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">额定转速</label>
                  <div className="p-3 bg-purple-50 rounded-md">
                    <p className="font-semibold text-purple-900">{project.ratedSpeed}</p>
                  </div>
                </div>
                
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">额定扭矩</label>
                  <div className="p-3 bg-indigo-50 rounded-md">
                    <p className="font-semibold text-indigo-900">{project.ratedTorque}</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="environment" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Thermometer className="h-5 w-5" />
                工作环境
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">工作环境温度</label>
                  <div className="p-3 bg-orange-50 rounded-md">
                    <p className="font-semibold text-orange-900">
                      {project.workingTempMin}°C 至 {project.workingTempMax}°C
                    </p>
                  </div>
                </div>
                
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">最大功率</label>
                  <div className="p-3 bg-teal-50 rounded-md">
                    <p className="font-semibold text-teal-900">{project.maxPower}</p>
                  </div>
                </div>
                
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">额定电压</label>
                  <div className="p-3 bg-cyan-50 rounded-md">
                    <p className="font-semibold text-cyan-900">{project.ratedVoltage}</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="control" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Shield className="h-5 w-5" />
                控制详细描述
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="grid grid-cols-1 md:grid-cols-3 gap-6">
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">控制模式</label>
                  <div className="p-3 bg-emerald-50 rounded-md">
                    <p className="font-semibold text-emerald-900">{project.controlMode}</p>
                  </div>
                </div>
                
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">驱动类型</label>
                  <div className="p-3 bg-violet-50 rounded-md">
                    <p className="font-semibold text-violet-900">{project.driveType}</p>
                  </div>
                </div>
                
                <div className="space-y-2">
                  <label className="text-sm font-medium text-gray-500">通信方式</label>
                  <div className="p-3 bg-pink-50 rounded-md">
                    <p className="font-semibold text-pink-900">{project.communication}</p>
                  </div>
                </div>
              </div>
            </CardContent>
          </Card>
        </TabsContent>

        <TabsContent value="image" className="space-y-4">
          <Card>
            <CardHeader>
              <CardTitle className="flex items-center gap-2">
                <Power className="h-5 w-5" />
                项目图片
              </CardTitle>
            </CardHeader>
            <CardContent>
              <div className="border-2 border-dashed border-gray-300 rounded-lg p-8 text-center">
                <Power className="h-16 w-16 text-gray-400 mx-auto mb-4" />
                <p className="text-gray-600 mb-2">项目设备图片</p>
                <p className="text-sm text-gray-500">c91881...57.jpg</p>
                <Button variant="outline" className="mt-4">
                  查看大图
                </Button>
              </div>
            </CardContent>
          </Card>
        </TabsContent>
      </Tabs>
    </div>
  )
}